<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>12_节点操作-父子关系</title>
    </head>
    <body>
        <ul id="uu">
            <li>小钻风</li>
            <li>总钻风</li>
            <li>金角大王</li>
            <li>银角大王</li>
            <li>奔波儿灞</li>
            <li>霸波尔奔</li>
        </ul>

        <script>
            var ul = document.getElementById('uu');
            // （1）获取ul的子节点
            // console.log(ul.childNodes);
            // （2）获取ul的子元素节点
            // console.log(ul.children);

            // （3）获取ul的第一个子节点
            // console.log(ul.firstChild);
            // （4）获取ul的第一个子元素节点  只有高级浏览器才会识别
            // console.log(ul.firstElementChild);

            // （5）获取ul的最后一个子节点
            console.log(ul.lastChild);
            // （6）获取ul的最后一个子元素节点  只有高级浏览器才会识别
            console.log(ul.lastElementChild);
            
        </script>
    </body>
</html>